<template>
    <div>
         <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>日志管理</el-breadcrumb-item>
        <el-breadcrumb-item>操作日志</el-breadcrumb-item>
        </el-breadcrumb>
         <!-- 卡片视图 -->
         <el-card>
            <!-- 搜索 添加 -->
            <el-row :gutter="24">
                <el-col :span="2" style="padding-right: 0">
                    <el-col :span="1"><el-button type="text" style="color: black;font-weight: bolder;font-size: 14px;" size="small">系统模块</el-button></el-col>
                </el-col>
                <el-col :span="5">
                     <el-input size="small" placeholder="请输入内容" v-model="queryInfo.title" clearable></el-input>
                </el-col>
                <el-col :span="2" style="padding-right: 0">
                    <el-col :span="1"><el-button type="text" style="color: black;font-weight: bolder;font-size: 14px;" size="small">操作人员</el-button></el-col>
                </el-col>
                <el-col :span="5">
                    <el-input size="small" placeholder="请输入内容" v-model="queryInfo.operName" clearable></el-input>
                </el-col>
                <el-col :span="1"><el-button type="text" style="color: black;font-weight: bolder;font-size: 14px;" size="small">类型</el-button></el-col>
                <el-col :span="4">
                    <el-select v-model="queryInfo.businessType" placeholder="请选择" size="small">
                        <el-option v-for="(value, key) in typeOptions" :key="key" :label="value" :value="key"></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row :gutter="24"  style="margin-bottom: 8px;margin-top: 12px;">
                <el-col :span="2" style="padding-left: 30px"><el-button type="text" style="color: black;font-weight: bolder;font-size: 14px;" size="small">状态</el-button></el-col>
                <el-col :span="5">
                     <el-select v-model="queryInfo.status" placeholder="请选择" size="small">
                         <el-option v-for="(value, key) in statusOptions" :key="key" :label="value" :value="key"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" icon="el-icon-search" @click="getOperLogList" size="mini">搜索</el-button>
                </el-col>
                <el-col :span="2">
                    <el-button icon="el-icon-refresh" style="float: right;margin-right: 40px;" @click="resetQuery" size="mini">重置</el-button>
                </el-col>
            </el-row>
             <el-row :gutter="10" style="margin-bottom: 8px;margin-top: 12px">
                 <el-col :span="1.5">
                     <el-button
                             type="danger"
                             icon="el-icon-delete"
                             size="mini"
                             :disabled="multiple"
                             @click="handleDelete"
                     >删除</el-button>
                 </el-col>
                 <el-col :span="1.5">
                     <el-button
                             type="danger"
                             icon="el-icon-delete"
                             size="mini"
                             @click="handleClean"
                     >清空</el-button>
                 </el-col>
                 <el-col :span="1.5">
                     <el-button
                             type="warning"
                             icon="el-icon-download"
                             size="mini"
                             :disabled="multiple"
                             @click="handleExportSelected"
                     >导出选中
                     </el-button>
                 </el-col>
                 <el-col :span="2">
                     <el-button
                             type="success"
                             icon="el-icon-download"
                             size="mini"
                             @click="handleExportAll"
                     >导出所有</el-button>
                 </el-col>
             </el-row>
             <el-table 
                ref="loginLogTable"
                :data="list"
                :row-key="getRowKey"
                @selection-change="handleSelectionChange"
                header-row-class-name="table_header" 
                :header-cell-style="table_header"
                border 
                stripe
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                >
                 <el-table-column type="selection" :reserve-selection="true" width="55" align="center" />
                 <el-table-column label="日志编号" width="80" align="center" prop="operId" />
                 <el-table-column label="系统模块" align="center" prop="title" />
                 <el-table-column label="操作类型" width="70" align="center" prop="businessType" :formatter="typeFormat" />
                 <el-table-column label="请求方式" width="70" align="center" prop="requestMethod" />
                 <el-table-column label="操作人员" align="center" prop="operName" />
                 <el-table-column label="主机" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
                 <el-table-column label="操作地点" align="center" prop="operLocation" width="115" />
                 <el-table-column label="操作状态" align="center" prop="status" width="70" :formatter="statusFormat" />
                 <el-table-column label="操作日期" align="center" prop="operTime" width="160">
                     <template slot-scope="scope">
                         <span>{{ scope.row.operTime | parseTime }}</span>
                     </template>
                 </el-table-column>
                 <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                     <template slot-scope="scope">
                         <el-button
                                 size="mini"
                                 type="text"
                                 icon="el-icon-view"
                                 @click="handleView(scope.row,scope.index)"
                         >详细</el-button>
                     </template>
                 </el-table-column>
             </el-table>
              <!-- 分页区域 -->
            <div class="pager-box">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pageNum"
                    :page-sizes="[2, 5, 10, 15]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    prev-text="上一页"
                    next-text="下一页"
                    :total="total"
                    background
                    hide-on-single-page
                ></el-pagination>
            </div>

             <!-- 操作日志详细 -->
             <el-dialog title="操作日志详细" :visible.sync="open" width="700px">
                 <el-form ref="form" :model="form" label-width="100px" size="mini">
                     <el-row>
                         <el-col :span="12">
                             <el-form-item label="操作模块：">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
                             <el-form-item
                                     label="登录信息："
                             >{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
                         </el-col>
                         <el-col :span="12">
                             <el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
                             <el-form-item label="请求方式：">{{ form.requestMethod }}</el-form-item>
                         </el-col>
                         <el-col :span="12">
                             <el-form-item label="耗时：">{{ form.latencyime }}</el-form-item>
                         </el-col>
                         <el-col :span="24">
                             <el-form-item label="操作方法：">{{ form.method }}</el-form-item>
                         </el-col>
                         <el-col :span="24">
                             <el-form-item label="请求参数：">{{ form.operParam }}</el-form-item>
                         </el-col>
                         <el-col :span="24">
                             <el-form-item label="返回参数：">{{ form.jsonResult }}</el-form-item>
                         </el-col>
                         <el-col :span="12">
                             <el-form-item label="操作状态：">
                                 <div v-if="form.status === 0">正常</div>
                                 <div v-else-if="form.status === 1">失败</div>
                             </el-form-item>
                         </el-col>
                         <el-col :span="12">
                             <el-form-item label="操作时间：">{{ form.operTime | parseTime }}</el-form-item>
                         </el-col>
                         <el-col :span="24">
                             <el-form-item v-if="form.status === 1" label="异常信息：">{{ form.errorMsg }}</el-form-item>
                         </el-col>
                     </el-row>
                 </el-form>
                 <div slot="footer" class="dialog-footer">
                     <el-button @click="open = false">关 闭</el-button>
                 </div>
             </el-dialog>
         </el-card>
    </div>
</template>

<script>
    import { formatJson } from '@/utils'
export default {
    data () {
        return {
        // 权限列表
            queryInfo: {
                // 当前页数
                pageNum: 1,
                // 每页显示多少数据
                pageSize: 10,
                title: undefined,
                operName: undefined,
                businessType: undefined,
                status: undefined,
            },
            loading: true,
            // 选中数组
            ids: [],
            // 非多个禁用
            multiple: true,
            // 状态数据字典
            statusOptions: {'0': '正常', '1': '关闭'},
            // 类型数据字典
            typeOptions: {
                '1': '新增',
                '2': '修改',
                '3': '删除',
                '4': '授权',
                '5': '导出',
                '6': '导入',
                '7': '强退',
                '8':'生成代码',
                '9': '清空数据',
                '10': '登录',
                '11': '退出',
                '12': '获取验证码',
            },
            // 总条数
            list: [],
            total: 0,
            // 日期范围
            dateRange: [],
            // 是否显示弹出层
            open: false,
            // 表单参数
            form: {},
        }
    },
    created () {
        this.getOperLogList();
    },
    methods: {
        table_header(row, column, rowIndex, columnIndex){
            return 'background-color: #409EFF; color: white; font-size: 12px;'
        },
        handleSizeChange (newSize) {
            this.queryInfo.pageSize = newSize;
            this.getOperLogList()
        },
        handleCurrentChange (newNum) {
            this.queryInfo.pageNum = newNum;
            this.getOperLogList();
        },
        statusFormat(row, column) {
            return this.statusOptions[row.status]
        },
        typeFormat(row, column) {
            return this.typeOptions[row.businessType]
        },
        getRowKey(row){
            return row.operId;
        },
        async getOperLogList () {
            var v1 = this;
            const { data: res, status: status } = await this.axios.get('operlog/getOperLogList', {params: v1.queryInfo});
            if (status !== 200) {
                return this.$message.error('获取登录日志列表失败！')
            }
            this.list = res.data.list;
            this.total = res.data.total;
            this.loading = false;
        },
        handleQuery(){
            this.queryInfo.pageNum = 1;
            this.getOperLogList();
        },
        resetQuery(){
            this.dateRange = [];
            this.queryInfo.title = undefined;
            this.queryInfo.businessType = undefined;
            this.queryInfo.operName = "";
            this.queryInfo.status = "";
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.operId);
            this.multiple = !selection.length
        },
        /** 详细按钮操作 */
        handleView(row) {
            this.open = true;
            this.form = row
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const operIds = row.operId || this.ids;
            let v1 = this;
            this.$confirm('是否确认删除日志编号为"' + operIds + '"的数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(function() {
                v1.axios.delete("operlog/deleteOperLog", {params: {"ids": operIds}})
                    .then(function (response) {
                        if (response.status !== 200) {
                            return v1.$message.error(res.msg);
                        }
                        v1.getOperLogList();
                    })
                    .catch(function (error) {
                        v1.$message.error(error);
                    });
            }).then(() => {
                this.getOperLogList();
                this.msgSuccess('删除成功')
            }).catch(function() {})
        },
        /** 清空按钮操作 */
        handleClean() {
            let v1 = this;
            let v2 = this;
            this.$confirm('是否确认清空所有操作日志数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(function() {
                v1.axios.delete("operlog/clean")
                    .then(function (response) {
                        if (response.status !== 200) {
                            return v1.$message.error(res.msg);
                        }
                        v2.getOperLogList();
                        v2.$message.success('清空成功')
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }).then(() => {
                this.getOperLogList();
                this.msgSuccess('清空成功')
            }).catch(function() {})
        },
        /** 导出按钮操作 */
        handleExportSelected() {
            const ids = this.ids;
            this.$confirm('是否确认导出选中的所有操作日志数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                this.downloadLoading = true;
                const {data: res, status: status} = await this.axios.get('operlog/getOperLogListByIds', {params: {ids}});
                if (status !== 200) return this.$message.error(res.msg);
                import('@/vendor/Export2Excel').then(excel => {
                    const tHeader = ['日志编号', '系统模块', '操作类型', '请求方式', '操作人员', '主机', '操作地点', '操作状态', '操作url', '操作日期']
                    const filterVal = ['operId', 'title', 'businessType', 'method', 'operName', 'operIp', 'operLocation', 'status', 'operUrl', 'operTime'];
                    const data = formatJson(filterVal, res.data);
                    excel.export_json_to_excel({
                        header: tHeader,
                        data,
                        filename: '操作日志',
                        autoWidth: true, // Optional
                        bookType: 'xlsx' // Optional
                    });
                    this.downloadLoading = false
                })
            })
        },
        handleExportAll() {
            this.$confirm('是否确认导出选中的所有操作日志数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                this.downloadLoading = true;
                var queryParams = JSON.parse(JSON.stringify(this.queryInfo));
                queryParams.pageNum = undefined;
                queryParams.pageSize = undefined;
                const {data: res, status: status} = await this.axios.get('operlog/getOperLogList', {params: queryParams});
                if (status !== 200) return this.$message.error(res.msg);
                import('@/vendor/Export2Excel').then(excel => {
                    const tHeader = ['日志编号', '系统模块', '操作类型', '请求方式', '操作人员', '主机', '操作地点', '操作状态', '操作url', '操作日期']
                    const filterVal = ['operId', 'title', 'businessType', 'method', 'operName', 'operIp', 'operLocation', 'status', 'operUrl', 'operTime'];
                    const data = formatJson(filterVal, res.data.list);
                    excel.export_json_to_excel({
                        header: tHeader,
                        data,
                        filename: '操作日志',
                        autoWidth: true, // Optional
                        bookType: 'xlsx' // Optional
                    });
                    this.downloadLoading = false
                })
            })
        },
    },
}
</script>
<style lang="less" scoped>
</style>